<template>
  <div class="my_post">
    <div class="row pt-4 pl-3 pb-2">
      <div class="search col-md-7">
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              <h5 class="" style="font-weight: bold"><i class="fa fa-pencil-square fa-fw"></i>我的记录本</h5>
              <div class="fontclass">
                <a class="pl-5 text-right" href="javascript:void(0);"><i class="fa fa-search fa-fw"></i> 搜索</a>
              </div>
            </template>
            <!--            搜索框-->
            <div class="search">
              <div class="">
                <el-input
                    size="large"
                    placeholder="请输入记录本标题，回车搜索..."
                    v-model="find_record"
                    clearable
                    @keyup.enter.native="findByTitle">
                </el-input>
              </div>
<!--              <div class="col-md-5">-->
<!--                  <el-button type="" icon="el-icon-search" @click="findByTitle()" size="large">搜索</el-button>-->
<!--                <span class="pl-2">-->
<!--                  <el-button type="" @click="clearInput()" size="large">重置</el-button>-->
<!--                </span>-->
<!--              </div>-->
            </div>

          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="col-md-5" align="right">

        <el-form :model="pc" ref="pc" label-width="100px" class="pc" status-icon>
          <el-form-item label="" :label-width="formLabelWidth" prop="record_auth">
            <el-select v-model="record_auth" placeholder="选择记录本权限..."
                       filterable
                       @change="findByCheck">
              <el-option v-for="(record_check) in record_check"
                         :label="record_check.name" :value="record_check.id" :key="record_check.id">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>
    </div>

    <!--我的记录本列表-->
    <div class="person_post" v-if="this.show_info.length>0">
      <div class="post " v-for="(record) in show_info" :key=record.record_id>
        <ul class="list-unstyled pl-3">
          <li class="media">
            <div class="media-body">
              <div class="row">
                <div class="title col-md-8">
                  <router-link :to="{path:'/Personal/One_Note',query:{record_id:record.record_id}}">
                    <a class="mb-1" href="javascript:void(0);" >{{record.record_title}}</a>
                  </router-link>
                </div>
                <div class="col-md-4" align="right">
                  <a style="color: #6b6e71;font-size: 17px;" v-if="record.record_authority==1" href="javascript:void(0);" @click="updateAuth(record.record_id,record.record_authority)"><i class="fa fa-eye pr-2" style="color: #2a7f61"></i>公开</a>
                  <a style="color: #6b6e71;font-size: 17px;" v-if="record.record_authority==0" href="javascript:void(0);" @click="updateAuth(record.record_id,record.record_authority)"><i class="fa fa-eye-slash pr-2" style="color: #a11918"></i>私密</a>
                </div>
              </div>
              <div class="content pt-2">
                <p>{{record.record_content}}</p>
              </div>

              <div class="row pt-3 fontclass" style="text-align: left;">
                <div class="col-md-8">
                  <router-link :to="{path:'/Personal/One_Note',query:{record_id:record.record_id}}">
                    <a class="pr-2" href="javascript:void(0);">
                      <i class="fa fa-pencil fa-fw"></i> 编辑
                    </a>
                  </router-link>

                  <a class="pr-2" @click="delete_record(record.record_id)" href="javascript:void(0);">
                    <i class="fa fa-trash fa-fw"></i> 删除
                  </a>
                </div>
                <div class="col-md-4" align="right">
                  <p style="color: #6b6e71;font-size: 17px;">编辑于 {{record.record_time}}</p>
                </div>

              </div>
            </div>
          </li>
          <div class="dropdown-divider"></div>
        </ul>
      </div>
    </div>

    <div class="noFile" v-else>
      <img :src="imgs.noInfo" alt="...">
      <h2>{{this.nullContainer}}</h2>
    </div>
    <div class="block pt-3 pb-4" v-show="this.show_info.length>0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="noteContainerPage"
          :page-size="noteContainerSize"
          layout="total, prev, pager, next"
          :total="total">
        <!--          :background="'whitesmoke'" -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
import noInfo from "@/assets/noFile.png";
import {getMyRecordInfo,updateAuthority,deleteRecord} from '@/api/Record'

export default {
  name: "person_note",
  data(){
    return{
      imgs:{
        noInfo
      },
      //分页
      noteContainerPage:0, // 分页的数据：当前页数
      noteContainerSize:0, // 分页的数据：每页的数量
      total: 0,
      record_info:[],
      search_info_check:[],
      search_info:[],
      show_info:[],
      copy_info:[],

      nullContainer: "你还没添加记录本哦，快去写写东西记录吧~",

      activeName: '1',
      formLabelWidth: '120px',
      //搜索框
      find_record:'',
      //下拉框
      record_auth:'',
      selectedChecks: [],
      record_check: [
        {
          id: 2,
          name: '全部'

        },
        {
          id:1,
          name: '公开'
        },
        {
          id: 0,
          name: '私密'
        },

      ],
      //下拉框
      pc:'',




    }
  },
  methods:{
    //获取当前登录用户的全部记录本
    init(){
      getMyRecordInfo({
        token:window.sessionStorage.getItem('token')
      }).then(res=>{
        this.record_info=res.data.data;
        this.copy_info=res.data.data;
        this.getShowNote();
      });

    },
    //分页
    getShowNote(){
      this.noteContainerSize=parseInt(4);
      this.show_info = this.record_info.slice((this.noteContainerPage - 1) * this.noteContainerSize, this.noteContainerPage * this.noteContainerSize);
      this.total=parseInt(this.record_info.length);
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);
      this.noteContainerPage= parseInt(val);
      this.getShowNote();

    },
    //根据记录本标题搜索功能
    findByTitle(){

      var search=this.find_record;
      if(search==""||search==null)
      {
        this.$msg.error('输入框不能为空！');
        this.init();
      }
      else {
        //执行本地过滤
        var search_list=this.copy_info;
        this.search_info=[];  //装搜索结果的容器
        for(let i=0;i<search_list.length;i++)
        {
          if(search_list[i].record_title.indexOf(search)>=0)
          {
            this.search_info.push(search_list[i]);
          }
        }
        if(this.search_info.length==0)
        {
          this.nullContainer='未找到相关结果,刷新一下~';
          this.$msg.error('未找到相关结果,刷新一下~');
        }
        else
        {
          this.nullContainer='暂无数据~';
        }
        this.record_info=this.search_info;
        //清空搜索框
        //分页
        this.noteContainerPage=parseInt(1);
        this.getShowNote();

        //清空搜索框
        this.find_record="";


      }
    },
    // 清空搜索框
    clearInput(){
      //清空搜索框
      this.find_record="";
      this.init();
    },
//根据记录本权限查询
    findByCheck(){

      var search=this.record_auth;

      var search_list=this.copy_info;
      this.search_info_check=[];  //装搜索结果的容器
      if(search===2){
        // 全部
        this.init();

      }else{
        //带条件筛选
        for(let i=0;i<search_list.length;i++)
        {
          if(search_list[i].record_authority === search)
          {
            this.search_info_check.push(search_list[i]);
          }
        }
        if(this.search_info_check.length==0)
        {
          this.nullContainer='未找到相关结果,刷新一下~';
          this.$msg.error('未找到相关结果,刷新一下~');
        }
        else
        {
          this.nullContainer='暂无数据~';
        }
        this.record_info=this.search_info_check;
        //分页
        this.noteContainerPage=parseInt(1);
        this.getShowNote();

        // //清空搜索框
        // this.record_auth="";

      }
    },
    //删除记录本
    delete_record(record_id){
      //再次确认
      this.$confirm('确认删除该记录本吗?删除后无法恢复哦~', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delete_main(record_id);
      }).catch(() => {
        this.$msg.error("取消删除！");
      });
    },
    delete_main(record_id){

      deleteRecord({
        record_id:record_id
      }).then(res=>{
        if(res.data.code===1){
          this.$msg.success("删除成功！");
        }
        else{
          this.$msg.error("删除失败！");
        }
        this.init();
      })


    },
  //  修改记录本权限
    updateAuth(record_id,record_authority){

      //再次确认
      this.$confirm('确认修改该记录本权限吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.updateAuth_main(record_id,record_authority);


      }).catch(() => {
        this.$msg.error("取消修改！");
      });

    },
    updateAuth_main(record_id,record_authority){
      updateAuthority({
        record_id:record_id,
        record_authority:record_authority
      }).then(res=>{
        if(res.data.code===1){
          this.$msg.success("修改成功！");
        }
        else{
          this.$msg.error("修改失败！");
        }
        this.init();
      });

    },


  },
  created() {
    let _this = this;

    _this.noteContainerPage=parseInt(1);

    _this.init();

  }

}
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
/*多行显示省略号，数字5为超出5行显示*/
.content p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  letter-spacing:3px;
  color: #6b6e71;
  font-size: 16px;
}
.content p:hover{
  color: black;
}
/*记录本标题*/
.title a{
  font-size: 23px;
  color: black;
}
.title a:hover{
  color: #2a7f61;
}
/*无数据图*/
.noFile{
  padding-top: 200px;
  padding-bottom: 300px;
  margin: 0px auto;
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
.fontclass a{
  font-size: 18px;
  color: #1c6285;
}
.fontclass a:hover{
  font-weight: bold;
}
/*.media:hover{*/
/*  background-color: whitesmoke;*/
/*}*/
.search{
  background-color:rgba(255,255,255,0.0)!important;
  position: relative;
  /*opacity: 0.5;*/
}
::v-deep .el-collapse-item__header
{
  color: #1c6285;
  background-color:rgba(255,255,255,0.0)!important;
  position: relative;
}
::v-deep .el-collapse-item__content {
  text-align: left;
  color:#1c6285;
  background-color:rgba(255,255,255,0.0);
  padding-bottom: 0;
}
</style>
